<template>
    <el-config-provider :locale="elLocale">
        <router-view
            v-if="isReload"
            v-loading="loading"
            :element-loading-svg="svg"
            element-loading-svg-view-box="-10, -10, 50, 50"
            :element-loading-text="$t('Base.loading')"
        />
    </el-config-provider>
</template>

<script setup lang="ts">
import { provide, nextTick, ref, computed, onMounted, watch, watchEffect } from 'vue';
import { ElConfigProvider } from 'element-plus';
import zh from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
import { loading } from '@/utils/loading';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();

const elLocale = computed(() => {
    return locale.value === 'en-US' ? en : zh;
});

const isReload = ref(true);

provide('reload', () => {
    isReload.value = false;
    nextTick(() => {
        isReload.value = true;
    });
});

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
</script>

<style scoped lang="scss"></style>
